<template>
    <div class="mine_out">
      <div class="mine_title">
        <div class="mine_name">我的</div>
        <div class="mine_msg" v-if="userPhone !='未登录'">
          <img :src="uesrImgUrl" onerror="this.src='../static/img/icon3.png' ">
          {{userPhone}}
        </div>
        <div class="mine_msg" v-else>
          <img @click="goDetail" :src="uesrImgUrl" onerror="this.src='../static/img/icon3.png' ">
          {{userPhone}}
        </div>
      </div>
      <div class="mine-line-out" >
        <div @click="goMyData"  class="row_out">
          <el-row>
          <el-col :xs="3" class="col_img">
            <img src="../../static/img/mine-icon1.png" alt="">
          </el-col>
          <el-col :xs="21">
            <el-row class="row_in">
              <el-col :xs="20">我的借款</el-col>
              <el-col :xs="4">
                <i class="el-icon-arrow-right"></i>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        </div>
        <div @click="goMyInfo" class="row_out">
          <el-row>
            <el-col :xs="3" class="col_img">
              <img src="../../static/img/mine-icon2.png" alt="">
            </el-col>
            <el-col :xs="21">
              <el-row>
                <el-col :xs="20">我的资料</el-col>
                <el-col :xs="4">
                  <i class="el-icon-arrow-right"></i>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <el-row class="line_border"></el-row>
        <!--<el-row class="row_border_top">-->
          <!--<el-col :xs="3" class="col_img">-->
            <!--<img src="../../static/img/mine-icon3.png" alt="">-->
          <!--</el-col>-->
          <!--<el-col :xs="21">-->
            <!--<el-row>-->
              <!--<el-col :xs="20">常见问题</el-col>-->
              <!--<el-col :xs="4">-->
                <!--<i class="el-icon-arrow-right"></i>-->
              <!--</el-col>-->
            <!--</el-row>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <el-row class="row_border_top" @click.native="show_layer">
          <el-col :xs="3" class="col_img">
            <img src="../../static/img/mine-icon4.png" alt="">
          </el-col>
          <el-col :xs="21">
            <el-row class="row_in">
              <el-col :xs="20">
                投诉与建议
              </el-col>
              <el-col :xs="4">
                <i class="el-icon-arrow-right"></i>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--<el-row>-->
          <!--<el-col :xs="3" class="col_img">-->
            <!--<img src="../../static/img/mine-icon5.png" alt="">-->
          <!--</el-col>-->
          <!--<el-col :xs="21">-->
            <!--<el-row>-->
              <!--<el-col :xs="20">-->
                <!--客服电话-->
                <!--<span class="service_phone">400-600-8567</span>-->
              <!--</el-col>-->
              <!--<el-col :xs="4">-->
                <!--<i class="el-icon-arrow-right"></i>-->
              <!--</el-col>-->
            <!--</el-row>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <el-row class="line_border"></el-row>
        <!--<el-row class="row_border_top">-->
          <!--<el-col :xs="3" class="col_img">-->
            <!--<img src="../../static/img/mine-icon1.png" alt="">-->
          <!--</el-col>-->
          <!--<el-col :xs="21">-->
            <!--<el-row class="row_in">-->
              <!--<el-col :xs="20">设置</el-col>-->
              <!--<el-col :xs="4">-->
                <!--<i class="el-icon-arrow-right"></i>-->
              <!--</el-col>-->
            <!--</el-row>-->
          <!--</el-col>-->
        <!--</el-row>-->
      </div>
      <!--//遮罩层-->
      <div class="suggest_out">
        <div class="suggest_in">
          <el-input v-model="suggest" placeholder="反馈内容"></el-input>
          <el-input v-model="phone" placeholder="联系方式"></el-input>
          <el-button type="primary" @click="sub">提交</el-button>
          <el-button type="info" @click="can">取消</el-button>
        </div>
      </div>
    </div>


</template>

<script>
  var params = new URLSearchParams();
  var params2 = new URLSearchParams();

  params.append('feedbackContent','');       //你要传给后台的参数值 key/value
  params.append('contactWay', '');

  params2.append('auth','')

  function GetQueryString(name)
  {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = decodeURI(window.location.search.substr(1)).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
  }

  function getCookie(cname)
  {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++)
    {
      var c = ca[i].trim();
      if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
  }
  let auth = getCookie('USER_P2P_H5_COOKIE');//获取cookie

  params2.append('auth',auth)
  params.append('auth',auth)

  let channelNum = GetQueryString("channelNum")
  if(!channelNum){
    channelNum = 0
  }
    export default {
        name: "mine",
      data() {
          return {
            uesrImgUrl:'./static/img/icon3.png',
            userPhone:'',
            suggest:'',
            phone:'',
            auth:''
          }
      },
      methods:{
        goMyData() {
          window.location.href = 'myData.html?channelNum='+channelNum
        },
        goMyInfo() {
          window.location.href = 'myInfo.html?channelNum='+channelNum
        },
        getCookie(cname){
          let name = cname + "=";
          let ca = document.cookie.split(';');
          for(let i=0; i<ca.length; i++)
          {
            let c = ca[i].trim();
            if (c.indexOf(name)==0) return c.substring(name.length,c.length);
          }
          return "";
        },
        goDetail() {
          window.location.href = 'login.html?channelNum='+channelNum
        },
        post() {
//          alert(this.getCookie('USER_P2P_H5_COOKIE'))
          this.auth = this.getCookie('USER_P2P_H5_COOKIE')
          params2.set('auth',this.auth)
          let _this = this
          this.$ajax({
            url:'/api/customer/info.html?channelNum='+channelNum,
            method:'post',
            data:params2
          }).then(res => {
            console.log('res',res)
            _this.userPhone = res.data.customer.mobilePhone
          }).catch(res => {
            console.log(res);
            _this.userPhone = '未登录'

          })
        },
        show_layer() {
          $('.suggest_out').show()
        },
        sub() {
          params.set('feedbackContent',this.suggest);
          params.set('contactWay',this.phone);
          this.$ajax({
            url:'/api/customer/add/feedback.html?channelNum='+channelNum,
            data:params,
            method:'post'
          }).then(function(res) {
            console.log('意见反馈',res)
          })
          $('.suggest_out').hide()
        },
        can() {
          $('.suggest_out').hide()
        }
      },
      mounted() {
        this.post()
      }
    }
</script>

<style scoped>
  .el-col img{
    width:16px;
  }
  .el-row{
    height:40px;
    line-height: 40px;
    overflow: hidden;
  }
  .row_in{
    border-bottom:1px solid #E8ECEB;
  }
 .col_img{
   text-align: center;
   line-height: 45px;
 }
  .suggest_out{
    display: none;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.3);
    position: fixed;
    z-index: 10;
    top:0;
  }
  .suggest_in{
    margin:60% auto;
    background: white;
    border-radius: 6px;
    padding:20px;
  }
</style>
